<script setup lang="ts">
import type { UpdateUserRequest } from '@/api/endpoints/system/user';
import { updateUser } from '@/api/endpoints/system/user';
import { showSuccess } from '@/lib/toast';
import { DynamicForm } from '@/components/form';
import type { FormSchema } from '@/components/form/types';
import * as z from 'zod';
import { useAuthStore } from '@/stores/auth';

const authStore = useAuthStore();

// 性别选项
const genderOptions = [
  { label: '男', value: 1 },
  { label: '女', value: 2 },
];

// 状态选项
const statusOptions = [
  { label: '正常', value: 1 },
  { label: '禁用', value: 0 },
];

// 用户表单 Schema
const userFormSchema: FormSchema = {
  config: {
    fields: [
      {
        name: 'avatar',
        type: 'avatar-upload',
        label: '头像',
        placeholder: '请上传头像',
        grid: { span: 2 },
        props: {
          size: 'sm',
        },
      },
      {
        name: 'name',
        type: 'text',
        label: '姓名',
        placeholder: '请输入姓名',
        required: true,
        grid: { span: 1 },
        disabled: true,
      },
      {
        name: 'email',
        type: 'email',
        label: '邮箱',
        placeholder: '请输入邮箱',
        required: true,
        grid: { span: 1 },
        disabled: true,
      },
      {
        name: 'position',
        type: 'text',
        label: '职位',
        placeholder: '请输入职位',
        grid: { span: 1 },
        disabled: true,
      },
      {
        name: 'phone',
        type: 'tel',
        label: '电话',
        placeholder: '请输入电话号码',
        grid: { span: 1 },
      },
      {
        name: 'gender',
        type: 'select',
        label: '性别',
        placeholder: '请选择性别',
        options: genderOptions,
        grid: { span: 1 },
        disabled: true,
      },
      {
        name: 'status',
        type: 'select',
        label: '状态',
        placeholder: '请选择状态',
        options: statusOptions,
        grid: { span: 1 },
        disabled: true,
      },
      {
        name: 'bio',
        type: 'textarea',
        label: '个人简介',
        placeholder: '请输入个人简介',
        grid: { span: 2 },
      },
    ],
    layout: {
      columns: 2,
      spacing: 'space-y-4',
    },
    submitButton: {
      text: '保存',
    },
    cancelButton: {
      text: '取消',
      show: true,
    },
  },
  validationSchema: z.object({
    id: z.string().optional(),
    avatar: z.string().optional(),
    name: z.string().min(2, '姓名至少2个字符').max(50, '姓名最多50个字符'),
    email: z.string().email('请输入有效的邮箱地址'),
    position: z.string().optional(),
    phone: z.string().optional(),
    gender: z.number().optional(),
    status: z.number(),
    bio: z.string().optional(),
  }),
  initialValues: {
    id: authStore.user?.id || '',
    avatar: authStore.user?.avatar || '',
    name: authStore.user?.name || '',
    email: authStore.user?.email || '',
    position: authStore.user?.position || '',
    phone: authStore.user?.phone || '',
    gender: authStore.user?.gender || undefined,
    status: authStore.user?.status || 1,
    bio: authStore.user?.bio || '',
  },
};

const loading = ref(false);

// 用户更新信息
async function handleSubmit(values: Record<string, any>) {
  try {
    loading.value = true;
    await updateUser(values as UpdateUserRequest);
    showSuccess('用户信息更新成功');
    authStore.logout();
  } finally {
    loading.value = false;
  }
}
</script>

<template>
  <DynamicForm
    class="flex-1 p-12"
    :schema="userFormSchema"
    :initial-values="userFormSchema.initialValues"
    :loading="loading"
    :show-cancel-button="false"
    @submit="handleSubmit"
  />
</template>
